<template>
    <a-modal v-model:open='open' width="60%" :title='$t("New")' @afterClose='handleClose'>
        <a-form ref="formRef" :model="formState" v-bind="{
            labelCol: { span: 5 },
        }" :rules="rules">
            <!-- <a-form-item :label="$t('角色名')" name="roleKey">
                <a-input v-model:value="formState.roleKey" />
            </a-form-item> -->
            <a-form-item :label="$t('角色键')" name="roleKey">
                <a-input v-model:value="formState.roleKey" />
            </a-form-item>
            <a-form-item :label="$t('nameEn')" name="nameEn">
                <a-input v-model:value="formState.nameEn" />
            </a-form-item>
            <a-form-item :label="$t('nameZh')" name="nameZh">
                <a-input v-model:value="formState.nameZh" />
            </a-form-item>
            <a-form-item :label="$t('nameAr')" name="nameAr">
                <a-input v-model:value="formState.nameAr" />
            </a-form-item>
            <a-form-item :label="$t('描述')" name="remark">
                <a-input v-model:value="formState.remark" />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button key='back' @click='handleClose'>{{ $t('关闭') }}</a-button>
            <a-button key='submit' type='primary' :loading='loading' @click='submit'>{{ $t('保存') }}</a-button>
        </template>
    </a-modal>
</template>
<script lang='ts' setup>
import { DefineProps, computed, defineEmits, onMounted, ref, watch } from 'vue';
import { message } from 'ant-design-vue';
import { GenItem, AddItem } from './item-data'
import { useLanguage } from "@/hooks/index"
import { AddRole } from '@/api/setting'
const { isEn, isCn, isArabic } = useLanguage()
const { t: $t } = useI18n();
const loading = ref(false)
const formRef = ref(null)
const emit = defineEmits(['ok', 'close', 'update:visible'])
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
        default: false
    },
})
const open = computed({
    get() {
        return props.visible
    },
    set(value) {
        emit('update:visible', value)
    }
})
const formState = ref(new GenItem());
const rules = {
    roleKey: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
    nameEn: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
    nameZh: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
    nameAr: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
}
const submit = debounce(
    async () => {
        formRef.value.validate().then(async () => {
            const data = cloneDeep(formState.value)
            // 自定义处理部分
            loading.value = true
            await AddRole(data).finally(() => {
                loading.value = false
            })
            message.success($t('操作成功'))
            handleOk()
        }).catch((error: any) => {
            // consolelog('error', error);
        });
    }, 1000
)
//
// 自定义业务处理
// 
const resetForm = () => {
    formRef.value.resetFields();
};
const clearValidates = () => {
    formRef.value.clearValidate();
};
const handleOk = () => {
    clearValidates()
    resetForm()
    emit('ok', open.value = false)
}
const handleClose = () => {
    clearValidates()
    resetForm()
    emit('update:visible', false)
}
</script>
<style lang='scss' scoped>
@include form-item-space;
</style>